<template>
  <div class="upload">
    <!-- <h2>裁剪组件</h2>
    <el-button @click="toggleShow">上传头像</el-button>
    <crop-upload
      :is-show="show"
      :action="action"
      :data="data"
      @onUpload="onUpload"
      @onShow="onShow"
    />
    <el-avatar icon="el-icon-user-solid" :size="80" :src="image" style="margin-top:10px;" /> -->
    <h1>上传到七牛云</h1>
    <el-upload
      :data="data"
      :multiple="true"
      :before-upload="beforeUpload1"
      :action="action"
      drag
      class="uplad"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
    <h1>上传到阿里云</h1>
    <el-upload
      :data="oss"
      :multiple="true"
      :before-upload="beforeUpload1"
      action="http://jiexun.oss-cn-hangzhou.aliyuncs.com"
      drag
      class="uplad"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
    <!-- <el-button type="danger" icon="el-icon-delete" style="margin-left:20px;" @click="deleteImage">删除</el-button> -->
  </div>
</template>

<script>
import { getToken, deleteImage } from '@/api/qiniu'
export default {
  data() {
    return {
      image_uri: [],
      fileList: [],
      data: {
        token: '',
        type: 2 // 上传类型
      },
      action: '',
      imageUrl: '',
      image: '',
      id: 0,
      show: false,
      oss: {}
    }
  },
  methods: {
    async toggleShow() {
      this.show = !this.show
      const { status, token, upload } = await getToken(this.data)
      if (status) {
        this.action = upload
        this.data.token = token
      }
    },
    onUpload({ status, data }) {
      const { id, url } = data
      this.image = url
      this.id = id
      console.log(this.image)
    },
    onShow(show) {
      this.show = show
    },
    async beforeUpload(file) {
      // const { status, data } = await getToken(this.data)
      // if (status) {
      //   this.action = upload
      //   this.data.token = token
      // }
    },
    async beforeUpload1(file) {
      const { status, data } = await this.axios.get('/aliyun/access_token?type=4,finder=1')
      if (status) {
        const _data = data.data
        const { accessid, callback, dir, expire, host, policy, signature } = _data
        this.oss.key = dir
        this.oss.host = host
        this.oss.policy = policy
        this.oss.Signature = signature
        this.oss.callback = callback
        this.oss.OSSAccessKeyId = accessid
        this.oss.expire = expire
      }
      // if (status) {
      //   this.action = upload
      //   this.data.token = token
      // }
    },
    deleteImage() {
      deleteImage('FkWU00hooGD9bC7fUxMQSCUuhwdC').then(({ status, msg }) => {
        if (!status) {
          this.$message.error(msg)
          return false
        }
        this.$message.success(msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload {
  margin: 20px 20px;
}
</style>
